<template>
	<view class="box">
		<view v-if="state!=1&&state!='0'">
			<view class="failed" style="color: red;" v-if="state==2">未通过审核，请确认信息重新提交</view>
			<view class="failed" style="color: red;" v-if="state==2">{{reasonForFailure}}</view>
			<!-- <view class="failed" v-if="state=='0'&&business_license">正在审核，请耐心等待</view> -->
			<view class="identityInfo">
				<view class="Title">企业信息<text>(必填）</text></view>
				<view class="Layout ">
					<view class="flex Info">
						<view><text class="red">*</text>企业名称</view>
						<input class="input" type="text" v-model="Name" placeholder="请输入企业名称" placeholder-style="color: #bebdbd;" />
					</view>
					<view class="flex Info">
						<view><text class="red">*</text>营业执照</view>
						<input class="input" type="text" maxlength="18" v-model="business_license" placeholder="请输入营业执照"
							placeholder-style="color: #bebdbd;" />
					</view>
					<view class="flex Info">
						<view><text class="red">*</text>手机区号</view>
						<view class="down_box">
							<view class="uni-form-item uni-column">
								<picker @change="bindPickerChange" :range="array">
									<!-- <label class="">{{array[index]}}:</label> -->
									<text>{{arrayNum[index]}}</text>
									<image src="@/static/images/bottsjxIco_03.png" mode="" class="bottsjxIco">
									</image>
								</picker>
							</view>
						</view>
					</view>
					<view class="flex Info">
						<view><text class="red">*</text>手机号码</view>
						<input class="input" type="number" maxlength="11" v-model="phone" placeholder="请输入手机号码"
							placeholder-style="color: #bebdbd;" />
					</view>

				</view>
			</view>
			<view class="IDCard">
				<view class="Title">营业执照正面</view>
				<view class="Layout flexBox">
					<view class="flex">
						<view class="upload">
							<view class="chonge" v-if="!isShow1">
								<view class="cancelImg" @click="cancelImg()">
									<uni-icons type="clear" size="25"></uni-icons>
								</view>
								<image :src="image1"></image>
							</view>
							<view class="chonge chongeser" @click="upload()" v-if="isShow1">
								<image class="chonup" :src="pic1" mode=""></image>
							</view>
						</view>
					</view>
					<view class="Example flex">
						<view class="Positive">
							<view class="shili">示例</view>
							<image :src="`${picUrl}/qyrz1.png`" mode=""></image>
						</view>

					</view>
				</view>
			</view>

			<view class="confirm" @click="confirm()" v-if="state=='-1'||state==2">
				确认提交
			</view>
			<!-- <view class="confirm2" v-if="state=='0'&&business_license">
				正在审核，请耐心等待
			</view> -->
		</view>
		<view v-if="state==1||state=='0'">
		
			<view class="identityInfo">
				<view class="Title">企业信息</view>
				<view class="Layout ">
					<view class="flex2 Info">
						<view><text class="red">*</text>企业名称:</view>
						<view class="input">{{Name}}</view>
					</view>
					<view class="flex Info">
						<view><text class="red">*</text>营业执照:</view>
						<view class="input">{{business_license}}</view>
						
					</view>
					<view class="flex Info">
						<view><text class="red">*</text>手机区号:</view>
						<view class="down_box">
							<view class="uni-form-item uni-column">
								<view>{{getAreaCode}}</view>
							</view>
						</view>
					</view>
					<view class="flex2 Info">
						<view><text class="red">*</text>手机号码:</view>
						<view class="input">{{phone}}</view>
						
					</view>
		
				</view>
			</view>
			<view class="IDCard">
				<view class="Title">营业执照</view>
				<view class="Layout flexBox">
					<view class="upload flex">
						<view class="chonge">
							<image :src="image1" mode=""></image>
						</view>
					</view>
					
				</view>
			</view>
			<view class="confirm2" v-if="state=='0'&&business_license">
				正在审核，请耐心等待
			</view>
			<view class="confirm2" v-if="state==1">
				已成功认证
			</view>
		</view>
	</view>
</template>

<script>
	const requImg = require("@/common/api_sign/requImg.js")
	export default {

		data() {
			return {
				Name: "",
				business_license: "",
				phone: "",
				image1: "../../../static/images/qyrz.png",
				image12: "",

				imgInfo: "",
				index: 0,
				array: [],
				arrayNum: [],
				area_code: [],
				state: "-1", //-1未提交，0待审核，1审核成功，2审核失败
				reasonForFailure: '' ,//认证失败理由
				getAreaCode:'+86',//提交成功后的区号
				isShow1:true,
				pic1:'../static/images/chonge.png'
			}
		},
		onLoad() {
			this.getInfo()
		},
		created() {
			// this.getCode()
		},
		methods: {
			getInfo() { //认证状态
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_company_auth',
					method: 'get',
					data: {},
				}).then(function(res) {
					console.log(res)
					if (res.error_code == 0) {
						res.datas.code.map(item => {
							that.array.push(item.area_name)
							that.arrayNum.push(item.code)
							that.area_code.push(item.area_code)
						})
						that.state = res.datas.state
						if (res.datas.member_auth_info) {
							that.Name = res.datas.member_auth_info.company_name
							that.business_license = res.datas.member_auth_info.business_license
							that.phone = res.datas.member_auth_info.mobile.substring(res.datas.member_auth_info
								.mobile.length - 11,res.datas.member_auth_info.mobile.length)
							// that.address=res.datas.member_auth_info.auth_address
							that.getAreaCode=res.datas.member_auth_info.mobile.substring(0, res.datas.member_auth_info
								.mobile.length - 11)
							that.image1 = res.datas.member_auth_info.business_license_img_path
							that.image12 = res.datas.member_auth_info.business_license_img
							that.reasonForFailure = res.datas.member_auth_info.treatment_remark
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}

				})
			},
			getCode(){//获取区号
				let that = this;
				this.$util.request({
						url: '/mobile/index.php?act=index&op=getAreaCode',
						method:'get',
						data: {},
					}).then(function(res) {
						console.log(res)
						if(res.error_code==0){
							res.datas.list.map(item=>{
								that.array.push(item.area_name)
								that.arrayNum.push(item.code)
								that.area_code.push(item.area_code)
							})
						}else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}

					})
			},
			//下拉框
			bindPickerChange: function(e) { //改变的事件名
				let that = this;
				console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值
				this.index = e.target.value //将数组改变索引赋给定义的index变量
				this.jg = this.array[this.index] //将array【改变索引】的值赋给定义的jg变量
			},
			confirm() {
				
				if (this.state == 1) {
					uni.showToast({
						title: "您已经认证过了",
						icon: "none"
					})
					return false
				}
				let idcardReg = /^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$/;
				// let iponetest=/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
				let that = this;
				if (that.Name && that.business_license && that.phone && that.image12) {
					// if(idcardReg.test(that.Idcard)){
					this.$util.request({ //提交
						url: '/mobile/index.php?act=member_index&op=member_company_auth',
						method: 'post',
						data: {
							code: that.area_code[that.index],
							company_name: that.Name,
							business_license: that.business_license,
							mobile: that.phone,
							business_license_img: that.image12
						},
					}).then(function(res) {
						if (res.error_code == 0) {
							uni.showToast({
								title: "认证成功",
								icon: "none",
								success() {
									setTimeout(() => {
										uni.switchTab({
											url: "/main/member/index"
										})
									}, 1000)
								}
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
							});
						}
					})
					//   }else{
					// uni.showToast({
					//     title:"营业执照式错误",
					// 	icon:"none",
					// });
					//   }
				} else {
					console.log(that.Name,that.business_license,that.phone,that.image12)
					uni.showToast({
						title: "必要信息不能为空",
						icon: "none"
					})
				}




			},
			cancelImg() { //删除图片
					this.image1=''
					this.isShow1=true
			},
			upload() { //图片选择
				if (this.state == 1) {
					uni.showToast({
						title: "您已经认证过了",
						icon: "none"
					})
					return false
				}
				let that = this;

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '图片上传中'
						});
						const tempFilePaths = res.tempFilePaths;
						let data = requImg.request("index.php?act=upload&op=uploadFile&buss_type=" + that
							.$uploadType.uploadtype009);
						// that.image1=tempFilePaths[0]
						var uper = uni.uploadFile({
							// 需要上传的地址
							url: that.$apiurl + 'index.php?act=upload&op=uploadFile',
							// filePath  需要上传的文件
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								key: data.key,
								buss_type: data.buss_type,
								api_sign: data.api_sign,
								comefrom: data.comefrom,
								api_time: data.api_time,
								// api_member_id:data.api_member_id,
								// api_member_name:data.api_member_name,
							},
							success(res1) {
								that.imgInfo =JSON.parse(res1.data) 
								if (that.imgInfo) {
									if (that.imgInfo.error_code == 0) {
										that.isShow1=false
										that.image1 = that.imgInfo.datas.file_url;
										that.image12 = that.imgInfo.datas.file_name;
									} else {
										uni.showToast({
											title: that.imgInfo.message,
											icon: "none"
										})
									}
								} else {
										uni.showToast({
											title: "图片上传失败",
											icon: "none"
										})
								}
							},
							complete(){
								uni.hideLoading();
							}
						})
						// uni.showToast({
						// 	title: "图片上传中",
						// 	icon: "loading",
						// 	success: () => {
						// 		setTimeout(() => {
						// 			//that.imgInfo = JSON.parse(that.imgInfo)
								
						// 		}, 2000)
						// 	}
						// })
					}
				});
			},

		},

	}
</script>

<style scoped lang="scss">
	.box{
		background-color: #FFFFFF;
		height: 100%;
	}
	.bottsjxIco {
		width: 30rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-left: 15rpx;
	}

	.uni-form-item {
		padding: 0;
		color: #333333;
	}

	.flexBox {
		display: flex;
		justify-content: space-between;
	}

	page {
		background-color: #FFFFFF;
	}

	.Layout {
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	.Title {
		font-size: 30rpx;
		color: #ff4300;
		background-color: #f2efef;
		padding: 5rpx 20rpx;
		font-weight: bolder;
	}

	.down_box {
		width: 530rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.Title text {
		font-size: 24rpx;
		color: #7f7c7c;
		margin-left: 20rpx;
		font-weight: 500;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.red {
		color: #ff4300;
		margin-right: 10rpx;
	}

	.Info {
		border-bottom: 1rpx solid #EEEEEE;
		line-height: 80rpx;
		color: #333333;
		font-weight: bolder;
		margin-top: 40rpx;
	}

	.Info .input {
		width: 530rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.IDCard {
		margin-top: 20rpx;

	}
	.upload {
		display: flex;
		margin-top: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		position: relative;
	
		.chonge {
			width: 330rpx;
			height: 260rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			position: relative;
	
			.cancelImg {
				position: absolute;
				right: -20rpx;
				top: -40rpx;
				z-index: 9;
			}
	
			.chonup {
				width: 100rpx;
				height: 100rpx;
			}
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.chongeser {
			border: 2rpx solid #65CDFB;
		}
	
	}

	.Example .shili {
		text-align: center;
		margin-top: 30rpx;
		font-weight: bolder;
		color: #555555;
	}

	.Example image {
		width: 245rpx;
		height: 158rpx;
		margin: 30rpx;
	}

	.Reason .content {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #555555;
	}

	.confirm {
		font-weight: bold;
		text-align: center;
		background-color: #ff4300;
		width: 50%;
		margin: 30rpx auto;
		line-height: 80rpx;
		color: #FFFFFF;
		border-radius: 25rpx;
	}

	.confirm2 {
		font-weight: bold;
		text-align: center;
		margin: 30rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #666666;
	}
</style>
